<!-- todo 导航 -->
<!-- @ 选项栏上：首页/职业库/技能库/工具库 选项栏下：公告/通知/主题 -->
<script setup></script>
<template>
  <div class="nav_1">
    <router-link to="/" class="shouye" active-class="active-link">
      <span class="iconfont icon-shouye_2"></span>
      <p>首页</p>
    </router-link>
    <router-link to="/job" class="job" active-class="active-link">
      <span class="iconfont icon-shenfenzheng"></span>
      <p>职业库</p>
    </router-link>
    <router-link to="/skill" class="skill" active-class="active-link">
      <span class="iconfont icon-faming-2"></span>
      <p>技能库</p>
    </router-link>
    <router-link to="/tool" class="tool" active-class="active-link">
      <span class="iconfont icon-weixiu_2"></span>
      <p>工具库</p>
    </router-link>
  </div>
  <!-- 选项栏（下） -->
  <div class="nav_2">
    <router-link to="/ann" class="ann" active-class="active-link">
      <span class="iconfont icon-tixing"></span>
    </router-link>
    <router-link to="/noti" class="noti" active-class="active-link">
      <span class="iconfont icon-gonggao"></span>
    </router-link>
    <span class="iconfont icon-fuzhuang"></span>
  </div>
</template>
<style scoped lang="less">
.active-link {
  color: #63e2b7;
}
// 导航栏-上
.nav_1 {
  margin-top: 60px;
  text-align: center;
  color: #d8d8d9;
  span {
    background-color: #34373c;
    border-radius: 7px;
    padding: 8px;
    font-size: 22px;
    &:hover {
      color: #63e2b7;
      padding: 10px;
    }
  }
  p {
    font-size: 12px;
    margin-top: 14px;
    margin-bottom: 30px;
  }
}
//   导航栏-下
.nav_2 {
  margin-top: 80px;
  text-align: center;
  color: #d8d8d9;
  span {
    display: block;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 20px;
    &:hover {
      color: #63e2b7;
    }
  }
}
</style>
